<template>
    <div class="oceanpay">

        <UxLoading v-if="loading" />

        <template v-else>

            <figure>
                <img v-if="status == '1'" src="https://img.podpartner.com/static/images-20230202/payment/paysuccess.png">
                <img v-else src="https://img.podpartner.com/static/images-20230202/payment/payfailure.png">
            </figure>

            <h2 v-if="status == '1'">Payment successful</h2>
            <h2 v-else>Payment failed</h2>

            <p>The comfort, practicality, and versatility of these sweatpants make them an unmatched new season wardrobe essential. The minimalist selection is made from 100% solid cotton fabric lined with extra-soft fleece, boasting a stylish, laid-back silhouette in easy-matching colors.</p>
            <h6>
                <span>This browser tab will close in</span>
                <em v-text="times"></em>
                <span>seconds.</span>
            </h6>

        </template>

    </div>
</template>
<script>
export default {
    name: "app",
    async asyncData (context) {

        return {
            body: (context.req || {}).body || '',
            // 成功
            // body: 'response_type=0&account=995345&terminal=99534501&signValue=7ACCCAF9B68AC1739E7541F04E040D86215F89E211B3253702343DE3B9188EFD&methods=Credit+Card&order_number=Y2022070698214442&order_currency=USD&order_amount=29.71&order_notes=&card_number=411111***1111&card_type=null&payment_country=HK&payment_id=221208154504808534502&payment_Method=Credit+Card&payment_authType=2&payment_status=1&payment_details=80000%3ATransaction+Approved&payment_solutions=None+required.&payment_risk=&payment_amount=null&payment_exchangeRate=null&pay_userId=null&pay_barCode=221208154504808534502&payment_bankInfo=',
            // 失败
            // body: 'response_type=0&account=995345&terminal=99534501&signValue=36A6D04A03E0E1D7915DD88682F7CAC934048566FCC8AE9CF421B2CBDB694AA5&methods=Credit+Card&order_number=Y2022070698214442&order_currency=USD&order_amount=29.71&order_notes=&card_number=411111***1111&card_type=null&payment_country=HK&payment_id=221208154331285534540&payment_Method=Credit+Card&payment_authType=2&payment_status=0&payment_details=80091%3ACardholder+Fail+to+Pass+3D+Authorized+Service&payment_solutions=Input+right+3D+secure+code+or+change+another+card+to+pay&payment_risk=&payment_amount=null&payment_exchangeRate=null&pay_userId=null&pay_barCode=221208154331285534540&payment_bankInfo='
        }
    },
    layout: 'layout-empty',
    data () {
        return {
            loading: true,
            status: 0,
            times: 6,
        };
    },
    methods: {
        countdown () {
            if (this.times > 1) {
                this.times = this.times - 1;
                setTimeout(this.countdown, 1000);
            } else {
                // 直接关闭
                this.times = 0;
                window.opener && window.close();
            }
        },

        init () {
            const body = this.body || ''
            const option = this.$oceanCallbackFormat(body) || {}
            this.status = option.payment_status
            this.countdown();
            window.opener && window.opener.postMessage(body, location.origin)
        },
    },
    mounted () {
        this.init();
        this.loading = false;
    },
};
</script>
<style lang="scss" scoped>
.oceanpay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Roboto-Regular, Roboto;
    box-sizing: border-box;
    padding-bottom: 100px;

    figure {
        width: 80px;
        height: 80px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    h2 {
        margin-top: 26px;
        font-size: 28px;
        font-weight: bold;
        color: #000000;
        line-height: 36px;
    }

    p {
        margin: 18px 20px 0;
        max-width: 780px;
        font-size: 16px;
        font-weight: 400;
        color: #555555;
        line-height: 24px;
        text-align: center;
    }

    h6 {
        margin: 48px 20px 0;
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 22px;

        em {
            color: #ea4c89;
        }
    }
}
</style>